import React from "react";
import { Tabbar, NavBar } from "react-vant";
import { AppsO, HomeO, CartO, Contact } from "@react-vant/icons";
import { Outlet, NavLink } from "react-router-dom";
import router from "../../routers";
import "./index.css";

const Index: React.FC = () => {
  return (
    <div>
      <NavBar title="电影院" leftArrow={false} />

      <Outlet />
      <div className="demo-tabbar">
        <Tabbar>
          <Tabbar.Item icon={<HomeO />}>
            <NavLink to="/home/home">首页</NavLink>
          </Tabbar.Item>
          <Tabbar.Item icon={<AppsO />}>
            <NavLink to="/home/class">分类</NavLink>
          </Tabbar.Item>
          <Tabbar.Item icon={<CartO />}>
            <NavLink to="/home/cart">购物车</NavLink>
          </Tabbar.Item>
          <Tabbar.Item icon={<Contact />}>
            <NavLink to="/home/my">我的</NavLink>
          </Tabbar.Item>
        </Tabbar>
      </div>
    </div>
  );
};

export default Index;
